<script setup lang="ts">
import {storeToRefs} from "pinia";
import {ref, reactive} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import appStore from "@/store";
import {changePassword, changePasswordVerificationCode} from "@/http/m_api/user";

const {userInfo} = storeToRefs(appStore.useUserInfoStore)

// 对话框显示状态
const dialogVisible = ref(false)

// 表单数据
const formData = reactive({
  email: '',
  verificationCode: '',
  newPassword: '',
  confirmPassword: ''
})

// 验证码倒计时
const countdown = ref(0)
const countdownTimer = ref()

// 密码可见性状态
const passwordVisible = ref(false)
const confirmPasswordVisible = ref(false)

// 切换密码可见性
const togglePasswordVisibility = (type: 'new' | 'confirm') => {
  if (type === 'new') {
    passwordVisible.value = !passwordVisible.value
  } else {
    confirmPasswordVisible.value = !confirmPasswordVisible.value
  }
}

// 打开修改密码对话框
const openChangePasswordDialog = () => {
  formData.email = userInfo.value.email
  formData.verificationCode = ''
  formData.newPassword = ''
  formData.confirmPassword = ''
  dialogVisible.value = true
}

// 发送验证码
const sendCode = async () => {
  if (countdown.value > 0) return

  try {
    await changePasswordVerificationCode({email: formData.email})
    ElMessage.success(`验证码已发送到您的邮箱 ${formData.email}`)

    // 开始倒计时
    countdown.value = 60
    countdownTimer.value = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(countdownTimer.value)
        countdownTimer.value = null
      }
    }, 1000)
  } catch (error) {
    ElMessage.error('验证码发送失败，请稍后重试')
  }
}

// 提交修改密码
const submitChangePassword = async () => {
  // 验证表单
  if (!formData.verificationCode) {
    ElMessage.error('请输入验证码')
    return
  }
  if (!formData.newPassword) {
    ElMessage.error('请输入新密码')
    return
  }
  if (formData.newPassword !== formData.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  if (formData.newPassword.length < 6) {
    ElMessage.error('密码长度至少6位')
    return
  }

  await changePassword({
    email: formData.email,
    newPassword: formData.newPassword,
    verificationCode: formData.verificationCode,
  }).then(res => {
    if(res.code === 0){
      ElMessage.success('密码修改成功')
      dialogVisible.value = false
    }
    else{
      ElMessage.error(res.message)
    }
  }).catch(err => {
    ElMessage.error(err.message)
  })
}

// 取消修改
const cancelChange = () => {
  dialogVisible.value = false
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value)
    countdownTimer.value = null
    countdown.value = 0
  }
}
</script>

<template>
  <div class="account-settings-container">
    <!-- Header Section -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <i class="fas fa-shield-alt"></i>
          账号安全
        </h2>
        <p class="page-subtitle">管理您的账号安全设置</p>
      </div>
    </div>

    <!-- Security Card -->
    <div class="security-card">
      <div class="card-header">
        <h3 class="card-title">
          <i class="fas fa-lock"></i>
          登录信息
        </h3>
        <span class="security-badge">
          <i class="fas fa-check-circle"></i>
          安全
        </span>
      </div>

      <div class="card-content">
        <!-- Email Row -->
        <div class="security-row">
          <div class="security-icon">
            <i class="fas fa-envelope"></i>
          </div>
          <div class="security-info">
            <div class="security-label">邮箱</div>
            <div class="security-value">{{ userInfo.email }}</div>
          </div>
          <div class="security-status">
            <span class="verified-badge">
              <i class="fas fa-check"></i>
              已验证
            </span>
          </div>
        </div>

        <!-- Password Row -->
        <div class="security-row">
          <div class="security-icon">
            <i class="fas fa-key"></i>
          </div>
          <div class="security-info">
            <div class="security-label">密码</div>
            <div class="security-value">••••••••••</div>
            <!--            <div class="last-updated">上次更新: 3个月前</div>-->
          </div>
          <div class="security-action">
            <el-button type="primary" class="change-btn" @click="openChangePasswordDialog">
              <i class="fas fa-edit"></i>
              修改密码
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- Security Tips -->
    <div class="security-tips">
      <div class="tip-header">
        <i class="fas fa-lightbulb"></i>
        安全提示
      </div>
      <ul class="tip-list">
        <li>定期更换密码可以提高账号安全性</li>
        <li>建议使用包含字母、数字和特殊字符的强密码</li>
      </ul>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog
        v-model="dialogVisible"
        width="500px"
        :before-close="cancelChange"
        class="password-dialog"
        align-center
    >
      <div class="dialog-content">
        <div class="dialog-header">
          <i class="fas fa-key"></i>
          <span>为了您的账号安全，请验证身份后修改密码</span>
        </div>

        <div class="form-container">
          <!-- 邮箱显示 -->
          <div class="form-item">
            <label class="form-label">
              <i class="fas fa-envelope"></i>
              邮箱地址
            </label>
            <div class="email-display">{{ formData.email }}</div>
          </div>

          <!-- 验证码输入 -->
          <div class="form-item">
            <label class="form-label">
              <i class="fas fa-shield-alt"></i>
              邮箱验证码
            </label>
            <div class="verification-input">
              <el-input
                  v-model="formData.verificationCode"
                  placeholder="请输入6位验证码"
                  maxlength="6"
                  class="code-input"
              />
              <el-button
                  type="primary"
                  class="send-code-btn"
                  :disabled="countdown > 0"
                  @click="sendCode"
              >
                {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
              </el-button>
            </div>
          </div>

          <!-- 新密码输入 -->
          <div class="form-item">
            <label class="form-label">
              <i class="fas fa-lock"></i>
              新密码
            </label>
            <div class="password-input-wrapper">
              <el-input
                  v-model="formData.newPassword"
                  :type="passwordVisible ? 'text' : 'password'"
                  placeholder="6~20位的英文字母与数字"
                  class="password-input"
              />
              <button
                  type="button"
                  class="password-toggle"
                  @click="togglePasswordVisibility('new')"
              >
                <i :class="passwordVisible ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
              </button>
            </div>
          </div>

          <!-- 确认密码输入 -->
          <div class="form-item">
            <label class="form-label">
              <i class="fas fa-lock"></i>
              确认密码
            </label>
            <div class="password-input-wrapper">
              <el-input
                  v-model="formData.confirmPassword"
                  :type="confirmPasswordVisible ? 'text' : 'password'"
                  placeholder="请再次输入新密码"
                  class="password-input"
              />
              <button
                  type="button"
                  class="password-toggle"
                  @click="togglePasswordVisibility('confirm')"
              >
                <i :class="confirmPasswordVisible ? 'fas fa-eye-slash' : 'fas fa-eye'"></i>
              </button>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <el-button class="cancel-btn" @click="cancelChange">
            取消
          </el-button>
          <el-button type="primary" class="confirm-btn" @click="submitChangePassword">
            <i class="fas fa-check"></i>
            确认修改
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';

.account-settings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
}

.page-header {
  margin-bottom: 30px;
  padding: 25px 30px;
  background: linear-gradient(135deg, rgba(100, 181, 246, 0.1), rgba(144, 202, 249, 0.05));
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);

  .header-content {
    .page-title {
      color: #ffffff;
      font-size: 1.8rem;
      font-weight: 600;
      margin: 0 0 8px 0;
      display: flex;
      align-items: center;
      gap: 12px;

      i {
        color: #64b5f6;
        font-size: 1.6rem;
      }
    }

    .page-subtitle {
      color: #bdc3c7;
      font-size: 0.95rem;
      margin: 0;
    }
  }
}

.security-card {
  background: rgba(52, 73, 94, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 25px;
  animation: slideInUp 0.5s ease-out;

  &:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  }

  .card-header {
    padding: 20px 30px;
    background: rgba(100, 181, 246, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .card-title {
      color: #ffffff;
      font-size: 1.2rem;
      font-weight: 600;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;

      i {
        color: #64b5f6;
        font-size: 1.1rem;
      }
    }

    .security-badge {
      background: linear-gradient(135deg, #27ae60, #2ecc71);
      color: white;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;

      i {
        font-size: 0.8rem;
      }
    }
  }

  .card-content {
    padding: 0;
  }
}

.security-row {
  display: flex;
  align-items: center;
  padding: 25px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    background: rgba(255, 255, 255, 0.03);
  }

  .security-icon {
    flex: 0 0 50px;
    height: 50px;
    background: rgba(100, 181, 246, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;

    i {
      color: #64b5f6;
      font-size: 1.2rem;
    }
  }

  .security-info {
    flex: 1;

    .security-label {
      color: #bdc3c7;
      font-size: 0.9rem;
      margin-bottom: 6px;
    }

    .security-value {
      color: #ffffff;
      font-size: 1.1rem;
      font-weight: 500;
    }

    .last-updated {
      color: #95a5a6;
      font-size: 0.8rem;
      margin-top: 6px;
    }
  }

  .security-status {
    margin-left: auto;
    margin-right: 20px;

    .verified-badge {
      background: rgba(39, 174, 96, 0.2);
      color: #2ecc71;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;

      i {
        font-size: 0.8rem;
      }
    }
  }

  .security-action {
    .change-btn {
      background: linear-gradient(135deg, #64b5f6, #42a5f5);
      border: none;
      border-radius: 25px;
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 181, 246, 0.3);
      }

      i {
        margin-right: 8px;
      }
    }
  }
}

.security-tips {
  background: rgba(243, 156, 18, 0.1);
  border: 1px solid rgba(243, 156, 18, 0.2);
  border-radius: 16px;
  padding: 20px 30px;
  animation: slideInUp 0.5s ease-out 0.2s both;

  .tip-header {
    color: #f39c12;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;

    i {
      font-size: 1.1rem;
    }
  }

  .tip-list {
    margin: 0;
    padding-left: 25px;

    li {
      color: #f5f5f5;
      margin-bottom: 8px;
      line-height: 1.5;

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 修改密码对话框样式
:deep(.password-dialog) {
  padding: 2px;
  background: rgba(52, 73, 94, 0.95);
  border-radius: 12px;
  overflow-y: hidden !important;

  .el-dialog {
    padding: 0;
  }

  .el-dialog__header {
    height: 0;
    padding: 0;
  }

  .el-dialog__body {
    padding: 0;
  }

  .el-dialog__footer {
    padding: 0
  }
}

// 禁用遮罩层的滚动条
:deep(.el-overlay) {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;

  .el-overlay-dialog {
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.dialog-content {
  padding: 25px;
  background: rgba(52, 73, 94, 0.95);

  .dialog-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding: 16px;
    background: rgba(100, 181, 246, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(100, 181, 246, 0.2);

    i {
      color: #64b5f6;
      font-size: 1.2rem;
    }

    span {
      color: #ffffff;
      font-size: 0.9rem;
    }
  }

  .form-container {
    .form-item {
      margin-bottom: 20px;

      .form-label {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #bdc3c7;
        font-size: 0.9rem;
        margin-bottom: 8px;
        font-weight: 500;

        i {
          color: #64b5f6;
          font-size: 0.9rem;
        }
      }

      .email-display {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 10px 14px;
        color: #ffffff;
        font-size: 1rem;
      }

      .verification-input {
        display: flex;
        gap: 10px;

        .code-input {
          flex: 1;
        }

        .send-code-btn {
          background: linear-gradient(135deg, #64b5f6, #42a5f5);
          height: 48px;
          border: none;
          border-radius: 8px;
          padding: 0 18px;
          font-weight: 500;
          white-space: nowrap;
          font-size: 0.9rem;

          &:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 20px rgba(100, 181, 246, 0.3);
          }

          &:disabled {
            background: rgba(255, 255, 255, 0.1);
            color: #95a5a6;
          }
        }
      }


      .password-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;

        .password-input {
          flex: 1;
          padding-right: 45px;
        }

        .password-toggle {
          position: absolute;
          right: 12px;
          top: 50%;
          transform: translateY(-50%);
          background: none;
          border: none;
          color: #95a5a6;
          cursor: pointer;
          padding: 8px;
          border-radius: 4px;
          transition: all 0.3s ease;
          z-index: 10;

          &:hover {
            color: #64b5f6;
            background: rgba(100, 181, 246, 0.1);
          }

          i {
            font-size: 0.9rem;
          }
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 15px;

  .cancel-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 8px;
    padding: 10px 25px;

    &:hover {
      background: rgba(255, 255, 255, 0.15);
    }
  }

  .confirm-btn {
    background: linear-gradient(135deg, #64b5f6, #42a5f5);
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-weight: 500;

    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(100, 181, 246, 0.3);
    }

    i {
      margin-right: 6px;
    }
  }
}

// Element Plus 组件样式覆盖
:deep(.el-input__wrapper) {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  box-shadow: none;
  padding: 8px 12px;

  &:hover {
    border-color: rgba(100, 181, 246, 0.5);
  }

  &.is-focus {
    border-color: #64b5f6;
    box-shadow: 0 0 0 2px rgba(100, 181, 246, 0.2);
  }

  .el-input__inner {
    color: #ffffff;
    background: transparent;
    font-size: 0.95rem;

    &::placeholder {
      color: #95a5a6;
      font-size: 0.9rem;
    }
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive Design
@media (max-width: 768px) {
  .account-settings-container {
    padding: 0 15px;
  }

  .security-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;

    .security-icon {
      margin-right: 0;
    }

    .security-status,
    .security-action {
      margin-left: 0;
      margin-right: 0;
      width: 100%;

      .change-btn {
        width: 100%;
      }
    }
  }

  :deep(.password-dialog) {
    .el-dialog {
      width: 90% !important;
      margin: 5vh auto;
    }
  }

  .dialog-content {
    padding: 20px;

    .form-container {
      .form-item {
        .verification-input {
          flex-direction: column;

          .send-code-btn {
            width: 100%;
          }
        }
      }
    }
  }

  .dialog-footer {
    flex-direction: column;

    .cancel-btn,
    .confirm-btn {
      width: 100%;
    }
  }
}
</style>
